<template>
	<view :class="['product-items',{marginTop0: !showSort, isBig: isBig}]">
		<block v-if="showSort">
			<view class="product-items-icon"><image :lazy-load="true" :src="object.image"></image></view>
			<view class="product-items-name">{{object.name}} {{object.brief}}</view>
			<view class="product-items-subClass">
				<view class="product-items-subClass-list">
					<text
						v-for="(data,i) in object.shelf_class"
						:key="i"
						@click="goClass(data.class_id,object.shelf_id)"
						:class="[{active: class_id_index[index] == data.class_id}]">{{data.name}}
					</text>
				</view>
				<view class="product-items-subClass-more" @click="more(object.space_id,object.space_name)">更多</view>
			</view>
		</block>
		<view :class="['product-items-list']">
			<block v-if="object.goods_list.length">
				<view class="waterfall" v-if="object.goods_list.length && isWaterfall && !isBig">
					<view class="waterfall-item" v-for="(item, index) in object.goods_list" :key="index" @click="goProInfo(item.goods_id || item.store_goods_id,item.store_goods_type)">
						<view class="goods-img"><image :src="item.image"></image></view>
						<view class="goods-name">{{item.goods_name}}</view>
						<!-- <view class="goods-click" v-if="orderBy!=='number'">人气：{{item.click}}</view> -->
						<view class="goods-price" v-if="isLogin">￥<text>{{item.goodsType==1?item.price_section:item.activity_price}}</text></view>
						<pt-noLogin v-else margin="15rpx"></pt-noLogin>
						<!-- <view class="goods-brand">
							<view class="goods-brand-image"><image :src="item.factory_logo" mode="aspectFit"></image><text>{{item.factory_name}}</text></view>
							<view class="arrow"><u-icon name="arrow-right" size="24" color="#A4A4A4"></u-icon></view>
						</view> -->
					</view>
				</view>
				<block v-else>
					<view
						:class="['product-items-list-item',{ispack: isPack}]" 
						v-for="(data,index) in object.goods_list" 
						:key="index"
						@click="goProInfo(data.goods_id || data.store_goods_id,data.store_goods_type)">
						<image :lazy-load="true" mode="widthFix" :src="data.image_middle || data.image" v-if="isBig"></image>
						<image :lazy-load="true" mode="aspectFill" :src="data.image_middle || data.image" v-else></image>
						<view class="goods_name">{{isMerchant?data.store_goods_name:data.goods_name}}</view>
						<view class="price" v-if="isLogin">
							<block v-if="light">￥<text>{{data.retail_price}}</text></block>
							<block v-else>￥<text>{{data.goodsType==1?data.price_section:data.activity_price}}</text></block>
						</view>
						<view style="text-align: center;" v-else><pt-noLogin margin="0 auto 10rpx"></pt-noLogin></view>
						<block v-if="orderBy!=='number'">
							<view class="click" v-if="data.click || data.click==0" :style="{paddingBottom: isMerchant && isPack?'30rpx':'0'}">人气：{{data.click}}</view>
						</block>
						<view class="click" v-if="showSaleCounts && data.sale_count">销量：{{data.sale_count}}</view>
						<view class="click" v-if="orderBy==='number'">销量：{{data.number}}</view>
					</view>
				</block>
				<view class="product-items-list-item" @click="moreSpace(object.shelf_id,object.name)" v-if="showSort">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/more.png"></image>
				</view>
			</block>
			<block v-if="!object.goods_list.length && !noMore">
				<view style="flex: 1;">
					<pt-nothing text="暂无数据" bgColor="#FFFFFF" :isHigh="isHigh" ></pt-nothing>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isWaterfall: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			},
			orderBy: {
				type: String,
				default: ''
			},
			light: {
				type: Boolean,
				default: false
			},
			showSaleCounts: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0
			},
			isPack: {
				type: Boolean,
				default: false
			},
			isMerchant: {
				type: Boolean,
				default: false
			},
			noMore: {
				type: Boolean,
				default: false
			},
			isHigh: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: ''
			},
			isBig: {
				type: Boolean,
				default: false
			},
			showSort: {
				type: Boolean,
				default: true
			},
			object: {
				icons: {
					type: String,
					default: ''
				},
				name: {
					type: String,
					default: ''
				},
				subClass: {
					type: Array,
					default () {
						return []
					}
				},
				list: {
					type: Array,
					default () {
						return []
					}
				},
			}
		},
		data() {
			return {
				subClass: [],
				class_id_index: [0,0,0,0,0]
			};
		},
		methods: {
			more(shelf_id){
				this.$emit('moreProducts',shelf_id)
			},
			moreSpace(shelf_id,shelf_name){
				this.$emit('moreSpace',shelf_id,shelf_name)
			},
			goClass(class_id,shelf_id){
				this.$set(this.class_id_index,this.index,class_id)
				this.$emit('goClass',class_id,shelf_id)
			},
			goProInfo(goods_id,type){
				this.$emit('GoInfoAddFoot',goods_id)
				if(this.light){ // 是否为灯具商家商品
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/light/light-product-info?isMerchant=true&goods_id='+goods_id
					})
					return
				}
				if(type){
					if(type==2){
						getApp().goProInfo(goods_id,true)
					}else{
						getApp().goProInfo(goods_id)
					}
					return
				}
				if(this.isMerchant){
					getApp().goProInfo(goods_id,this.isMerchant)
				}else{
					getApp().goProInfo(goods_id)
				}
			}
		},
		mounted() {
			if(this.showSort){
				this.subClass = JSON.parse(JSON.stringify(this.object.shelf_class)).slice(0,4)
			}
		}
	}
</script>

<style lang="scss">
	.product-items{
		border-bottom: solid 1px #F6F6F6;
		padding: 80rpx 0;
		.waterfall{
			display: flex;
			flex-wrap: wrap;
		}
		.waterfall-item{
			width: 330rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-top: 30rpx;
			background-color: #FFF;
			margin-right: 30rpx;
			&:nth-child(2n){
				margin-right: 0;
			}
			// &:nth-child(1),
			// &:nth-child(2){
			// 	margin-top: 0;
			// }
			.goods-img{
				image{
					width: 330rpx;
					height: 330rpx;
					border-radius: 8rpx 8rpx 0 0;
				}
			}
			.goods-name{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 15rpx 15rpx 0;
				font-size: 28rpx;
				color: #444;
			}
			.goods-click{
				font-size: 22rpx;
				color: #909090;
				padding: 15rpx 15rpx 0;
			}
			.goods-price{
				font-size: 24rpx;
				color: #F59359;
				font-family: 'din';
				padding: 15rpx;
				text{
					font-size: 30rpx;
				}
			}
			.goods-brand{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx;
				border-top: solid 2rpx #F7F7F7;
				.goods-brand-image{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						margin-right: 10rpx;
						background-color: #EEE;
					}
					text{
						font-size: 22rpx;
						color: #757575;
					}
				}
			}
		}
		&:last-child{
			border-bottom: none;
		}
		&.marginTop0{
			padding-top: 0;
			padding-bottom: 40rpx;
			.product-items-list{
				.product-items-list-item{
					margin: 40rpx 20rpx 0 0;
				}
			}
		}
		.product-items-icon{
			text-align: center;
			image{
				width: 66rpx;
				height: 66rpx;
			}
		}
		.product-items-name{
			text-align: center;
			color: #000;
			font-size: 24rpx;
			margin-top: 10rpx;
			font-weight: bold;
			text-transform: uppercase;
		}
		.product-items-subClass{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			text{
				padding: 0 25rpx;
				position: relative;
				font-size: 22rpx;
				transition: all .5s;
				&.active{
					font-weight: bold;
					font-size: 24rpx;
				}
				&::after{
					content: '';
					position: absolute;
					width: 1px;
					height: 20rpx;
					background-color: #E6E6E6;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				&:last-child::after{
					display: none;
				}
			}
		}
		.product-items-subClass-more{
			position: relative;
			padding-left: 25rpx;
			font-size: 22rpx;
			margin-top: 4rpx;
			&::before{
				content: '';
				position: absolute;
				width: 1px;
				height: 20rpx;
				background-color: #E6E6E6;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.product-items-list{
			display: flex;
			flex-wrap: wrap;
			.product-items-list-item{
				width: 335rpx;
				margin: 80rpx 20rpx 0 0;
				transition: all .5s;
				background-color: #FFF;
				border-radius: 16rpx;
				&:nth-child(2n){
					margin-right: 0;
				}
				image{
					width: 335rpx;
					height: 335rpx;
					border-radius: 16rpx 16rpx 0 0;
					transition: all .5s;
				}
				.goods_name{
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					color: #2F2F2F;
					padding: 20rpx;
				}
				.price{
					text-align: center;
					font-size: 24rpx;
					color: #F59359;
					padding-bottom: 20rpx;
					font-family: 'din';
					text{
						font-size: 32rpx;
					}
				}
				.click{
					text-align: center;
					font-size: 22rpx;
					color: #9E9E9E;
				}
				&.ispack{
					margin-top: 0;
					box-shadow: 0px 20rpx 40rpx 0px rgba(40,34,31,0.05);
					border-radius: 0px 0px 8rpx 8rpx;
					margin-bottom: 60rpx;
					padding-bottom: 0;
					image{
						height: 550rpx;
						border-radius: 8rpx 8rpx 0px 0px;
					}
				}
				.goods-brand{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.goods-brand-image{
						image{
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
						}
					}
				}
			}
		}
		&.isBig{
			.product-items-list-item{
				width: 100%;
				margin-right: 0 !important;
				padding-bottom: 30rpx;
				image{
					width: 100%;
				}
			}
		}
	}
</style>
